<template>
  <div class="birds">
    <div class="birds_one">
      <!-- 所在地区 -->
      <el-dropdown :hide-on-click="false" trigger="click" ref="dropdown6">
        <span class="el-dropdown-link">
          所在地区
          <img
            style="color: #f43107; width: 14px; height: 8px"
            src="@/assets/img/jt.png"
            alt=""
          />
        </span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-cascader-panel
              v-model="proPtions"
              :props="props"
              :options="options"
              @change="handleChange"
            />
          </el-dropdown-menu>
          <div class="dropdownButtom1">
            <div style="color: #ff8a35"></div>
            <div>
              <a-button style="margin-right: 10px" @click="checkClock6"
                >重置</a-button
              >
              <a-button
                style="background-color: #f43107; color: #fff"
                @click="recognize6"
                >确定</a-button
              >
            </div>
          </div>
        </template>
      </el-dropdown>
      <!-- 注册资本 -->
      <el-dropdown :hide-on-click="false" trigger="click" ref="dropdown9">
        <span class="el-dropdown-link">
          注册资本
          <img
            style="color: #f43107; width: 14px; height: 8px"
            src="@/assets/img/jt.png"
            alt=""
          />
        </span>
        <template #dropdown>
          <el-dropdown-menu style="width: 240px">
            <div
              class="height"
              v-for="item in moneyBids"
              :key="item.id"
              :class="{ active: money == item.id }"
              @click="moneyLietc(item)"
            >
              {{ item.name }}
            </div>

            <div style="display: flex; margin-top: 10px" v-if="money == '9'">
              <div class="search_money">
                <input
                  class="search_mput"
                  type="text"
                  v-model="radio1.min"
                  placeholder="最小值"
                />
                <span style="margin-right: 10px">至</span>
                <input
                  class="search_mput"
                  type="text"
                  v-model="radio1.max"
                  placeholder="最大值"
                />
              </div>
              万元
            </div>
            <div
              class="dropdownButtom"
              style="
                width: 240px;
                padding-top: 5px;
                border-top: 1px solid #e8e8e8;
              "
              v-if="money == '9'"
            >
              <div></div>
              <div>
                <a-button style="margin-right: 10px" @click="moneyClick"
                  >重置</a-button
                >
                <a-button
                  style="background-color: #f43107; color: #fff"
                  @click="recognize9"
                  >确定</a-button
                >
              </div>
            </div>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
      <!-- 企业规模 -->
      <el-dropdown :hide-on-click="false" trigger="click" ref="dropdown1">
        <span class="el-dropdown-link">
          企业规模
          <img
            style="color: #f43107; width: 14px; height: 8px"
            src="@/assets/img/jt.png"
            alt=""
          />
        </span>
        <template #dropdown>
          <el-dropdown-menu style="width: 240px">
            <div
              class="height"
              v-for="item in enterpriseBids"
              :key="item.id"
              :class="{ active: enterprise == item.id }"
              @click="enterpriseLietc(item)"
            >
              {{ item.name }}
            </div>

            <div
              style="display: flex; margin-top: 10px"
              v-if="enterprise == '9'"
            >
              <div class="search_money">
                <input
                  class="search_mput"
                  type="text"
                  v-model="radio1.enterprismin"
                  placeholder="最小值"
                />
                <span style="margin-right: 10px">至</span>
                <input
                  class="search_mput"
                  type="text"
                  v-model="radio1.enterprismax"
                  placeholder="最大值"
                />
              </div>
              人
            </div>
            <div
              class="dropdownButtom"
              style="
                width: 240px;
                padding-top: 5px;
                border-top: 1px solid #e8e8e8;
              "
              v-if="enterprise == '9'"
            >
              <div></div>
              <div>
                <a-button style="margin-right: 10px" @click="enterprisClick"
                  >重置</a-button
                >
                <a-button
                  style="background-color: #f43107; color: #fff"
                  @click="recognize1"
                  >确定</a-button
                >
              </div>
            </div>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
      <!-- 公司类型 -->
      <el-dropdown :hide-on-click="false" trigger="click" ref="dropdown3">
        <span class="el-dropdown-link">
          公司类型
          <img
            style="color: #f43107; width: 14px; height: 8px"
            src="@/assets/img/jt.png"
            alt=""
          />
        </span>
        <template #dropdown>
          <el-dropdown-menu>
            <div class="infOne">
              <el-checkbox-group v-model="radio1.Boos" size="large">
                <div
                  class="infOne_hove"
                  v-for="city in biddingBoos"
                  :key="city.id"
                >
                  <el-checkbox :label="city">{{ city.name }}</el-checkbox>
                </div>
              </el-checkbox-group>
            </div>
            <div class="dropdownButtom">
              <div></div>
              <div>
                <a-button style="margin-right: 10px" @click="reClick3"
                  >重置</a-button
                >
                <a-button
                  style="background-color: #f43107; color: #fff"
                  @click="recognize3"
                  >确定</a-button
                >
              </div>
            </div>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
      <!-- 经营状态 -->
      <el-dropdown :hide-on-click="false" trigger="click" ref="dropdown10">
        <span class="el-dropdown-link">
          经营状态
          <img
            style="color: #f43107; width: 14px; height: 8px"
            src="@/assets/img/jt.png"
            alt=""
          />
        </span>
        <template #dropdown>
          <el-dropdown-menu>
            <div class="infOne">
              <el-checkbox-group v-model="radio1.operates" size="large">
                <div
                  class="infOne_hove"
                  v-for="city in business"
                  :key="city.id"
                >
                  <el-checkbox :label="city">{{ city.name }}</el-checkbox>
                </div>
              </el-checkbox-group>
            </div>
            <div class="dropdownButtom">
              <div></div>
              <div>
                <a-button style="margin-right: 10px" @click="reClick10"
                  >重置</a-button
                >
                <a-button
                  style="background-color: #f43107; color: #fff"
                  @click="recognize10"
                  >确定</a-button
                >
              </div>
            </div>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
      <!-- 是否代理 -->
      <el-dropdown :hide-on-click="false" trigger="click" ref="dropdown13">
        <span class="el-dropdown-link">
          是否代理
          <img
            style="color: #f43107; width: 14px; height: 8px"
            src="@/assets/img/jt.png"
            alt=""
          />
        </span>
        <template #dropdown>
          <el-dropdown-menu style="width: 100px">
            <div
              class="height"
              v-for="item in position"
              :key="item.id"
              :class="{ active: agent == item.id }"
              @click="agentLietc(item)"
            >
              {{ item.name }}
            </div>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
    <div v-if="signalsRadio1.routerPush == 'disposition'">
      <el-input
        v-model="input3"
        placeholder="请输入公司名称"
        class="input-with-select"
      >
        <template #append>
          <el-button :icon="Search" @click="searButton" />
        </template>
      </el-input>
    </div>
  </div>
</template>

<script setup>
import domData from "@/utils/json/dom.json";
import { onMounted, ref, watch, reactive } from "vue";
import { useSearchStore, useRadio1Store } from "@/pain/search/search";
import { ElMessage } from "element-plus";
import { Search } from "@element-plus/icons-vue";
const props = { multiple: true, checkStrictly: true }; // 地区开启多选
import { useRouter } from "vue-router";
const router = useRouter();
const store = useSearchStore();
let prerequisite = ref([]);
const signalsRadio1 = useRadio1Store();
let proPtions = ref([]);
let input3 = ref("");
signalsRadio1.title.title = input3.value;
let radio1 = ref({
  leave: [], //省
  market: [], //市
  quarter: [], //区
  money: "", //注册资本
  max: "", //自定义 - 最大金额
  min: "", //自定义 - 最小金额
  enterpris: "", // 企业规模
  enterprismax: "", //自定义 - 最大人
  enterprismin: "", //自定义 - 最小人
  operates: [], //经营状态
  Boos: [], //公司类型
  agent: "", //是否代理
});
signalsRadio1.corporation = radio1.value;

// 地区
let options = [];
let children2 = ref([]);
let children3 = ref([]);
let diquArr = ref([]);
domData.forEach((aaa) => {
  diquArr.value.push(aaa);
});
options = domData.filter((item) => item.parent === 100000);
store.address = options;
domData.forEach((item) => {
  Reflect.set(item, "value", item.label);
});
options.forEach((element) => {
  children2 = domData.filter((word) => element.adcode == word.parent);
  Reflect.set(element, "children", children2);
  // children2.forEach((ele) => {
  //   children3 = domData.filter((word) => ele.adcode == word.parent);
  //   Reflect.set(ele, "children", children3);
  // });
});
const dropdown6 = ref();
let state = reactive({
  newList: [],
  newArr: [],
  optionsArr: [],
  children2Arr: [],
  children3Arr: [],
});
let drop6 = ref([]);
const recognize6 = () => {
  dropdown6.value.handleClose();
  console.log("valie", proPtions.value);
  proPtions.value.forEach((i) => {
    i.forEach((l) => {
      state.newList.push(l);
    });
  });

  diquArr.value.forEach((j) => {
    state.newList.filter((words) => {
      if (j.label == words) {
        state.newArr.push(j);
      }
    });
  });

  state.newArr = Array.from(new Set(state.newArr));
  options.forEach((j1) => {
    state.newArr.filter((words) => {
      if (j1.adcode == words.adcode) {
        state.optionsArr.push({
          id: j1.adcode,
          name: j1.label,
        });
      }
      return;
    });
  });
  options.forEach((element) => {
    children2 = domData.filter((word) => element.adcode == word.parent);
    children2.forEach((ele) => {
      state.newArr.filter((words1) => {
        if (ele.adcode == words1.adcode) {
          state.children2Arr.push({
            id: ele.adcode,
            name: ele.label,
          });
        }
      });
      children3 = domData.filter((word) => ele.adcode == word.parent);
      children3.forEach((lll) => {
        state.newArr.filter((words2) => {
          if (lll.adcode == words2.adcode) {
            state.children3Arr.push({
              id: lll.adcode,
              name: lll.label,
            });
          }
        });
      });
    });
  });
  radio1.value.leave = Array.from(new Set(state.optionsArr));
  radio1.value.market = Array.from(new Set(state.children2Arr));
  radio1.value.quarter = Array.from(new Set(state.children3Arr));
  if (signalsRadio1.routerPush == "disposition") {
    signalsRadio1.getcompetitors();
  }
  if (signalsRadio1.routerPush == "search") {
    signalsRadio1.getcompanys();
  }

  if (proPtions.value.length > 0) {
    drop6.value = [
      {
        name: "地区：",
        value: [
          {
            name: new Set(state.newList),
          },
        ],
      },
    ];
    prerequisite.value = [...drop6.value];
  }
};
const checkClock6 = () => {
  radio1.value.quarter = [];
  radio1.value.leave = [];
  radio1.value.market = [];
  state.newArr = [];
  state.newList = [];
  state.optionsArr = [];
  state.children2Arr = [];
  state.children3Arr = [];
  proPtions.value = [];
  drop6.value = [];
  signalsRadio1.corporation.leave = [];
  signalsRadio1.corporation.market = [];
  signalsRadio1.corporation.quarter = [];
};

// 注册资本
let money = ref("");
let moneyIndex = ref("");
let moneyBids = [
  {
    id: "1",
    name: "全部",
  },
  {
    id: "2",
    name: "0~100万",
  },
  {
    id: "3",
    name: "100~200万",
  },
  {
    id: "4",
    name: "200~500万",
  },
  {
    id: "5",
    name: "500~1000万",
  },
  {
    id: "9",
    name: "自定义",
  },
];
const dropdown9 = ref();
let moneyName = ref("");
let drop9 = ref([]);
const moneyLietc = (item) => {
  moneyName.value = item.name;
  radio1.value.money = item.name;
  money.value = item.id;
  moneyIndex.value = item.id;
  if (signalsRadio1.routerPush == "disposition") {
    signalsRadio1.getcompetitors();
  }
  if (signalsRadio1.routerPush == "search") {
    signalsRadio1.getcompanys();
  }
  if (item.id != "9") {
    if (radio1.value.money != "") {
      drop9.value = [
        {
          name: "注册资本：",
          value: [
            {
              name: item.name,
            },
          ],
        },
      ];
    }
    prerequisite.value = [...drop6.value, ...drop9.value];
    dropdown9.value.handleClose();
  }
};
const recognize9 = () => {
  if (radio1.value.min > radio1.value.max) {
    ElMessage({
      message: "请输入正确金额",
      type: "warning",
    });
    return;
  }

  if (radio1.value.max != "" && radio1.value.min != "") {
    drop9.value = [
      {
        name: "金额：",
        value: [
          {
            name: moneyName.value,
          },
        ],
      },
    ];
    prerequisite.value = [...drop6.value, ...drop9.value];
    dropdown9.value.handleClose();
    if (signalsRadio1.routerPush == "disposition") {
      signalsRadio1.getcompetitors();
    }
    if (signalsRadio1.routerPush == "search") {
      signalsRadio1.getcompanys();
    }
  }
};

const moneyClick = () => {
  radio1.value.max = "";
  radio1.value.min = "";
  drop9.value = [];
};

// 企业规模
let enterprise = ref("");
let enterpriseIndex = ref("");
let enterpriseBids = [
  {
    id: "1",
    name: "全部",
  },
  {
    id: "2",
    name: "0~50人",
  },
  {
    id: "3",
    name: "50~100人",
  },
  {
    id: "4",
    name: "100~500人",
  },
  {
    id: "5",
    name: "500~1000人",
  },
  {
    id: "9",
    name: "自定义",
  },
];
const dropdown1 = ref();
let operationName = ref("");
let drop1 = ref([]);
const enterpriseLietc = (item) => {
  operationName.value = item.name;
  radio1.value.enterpris = item.name;
  enterprise.value = item.id;
  enterpriseIndex.value = item.id;
  if (signalsRadio1.routerPush == "disposition") {
    signalsRadio1.getcompetitors();
  }
  if (signalsRadio1.routerPush == "search") {
    signalsRadio1.getcompanys();
  }

  if (item.id != "9") {
    if (radio1.value.enterpris != "") {
      drop1.value = [
        {
          name: "企业规模：",
          value: [
            {
              name: item.name,
            },
          ],
        },
      ];
    }
    prerequisite.value = [...drop6.value, ...drop9.value, ...drop1.value];
    dropdown1.value.handleClose();
  }
};

const recognize1 = () => {
  if (radio1.value.enterprismin > radio1.value.enterprismax) {
    ElMessage({
      message: "请输入正确金额",
      type: "warning",
    });
    return;
  }

  if (radio1.value.enterprismax != "" && radio1.value.enterprismin != "") {
    drop9.value = [
      {
        name: "企业规模：",
        value: [
          {
            name: operationName.value,
          },
        ],
      },
    ];
    prerequisite.value = [...drop6.value, ...drop9.value, ...drop1.value];
    dropdown1.value.handleClose();
    if (signalsRadio1.routerPush == "disposition") {
      signalsRadio1.getcompetitors();
    }
    if (signalsRadio1.routerPush == "search") {
      signalsRadio1.getcompanys();
    }
  }
};

const enterprisClick = () => {
  radio1.value.enterprismax = "";
  radio1.value.enterprismin = "";
  drop1.value = [];
};

// 是否代理
let agent = ref("");
let agentIndex = ref("");
let position = [
  {
    id: "1",
    name: "全部",
  },
  {
    id: "2",
    name: "代理公司",
  },
  {
    id: "3",
    name: "招投标公司",
  },
];
const dropdown13 = ref();
let drop13 = ref([]);
const agentLietc = (item) => {
  radio1.value.agent = item.id;
  agent.value = item.id;
  agentIndex.value = item.id;
  dropdown13.value.handleClose();
  if (signalsRadio1.routerPush == "disposition") {
    signalsRadio1.getcompetitors();
  }
  if (signalsRadio1.routerPush == "search") {
    signalsRadio1.getcompanys();
  }

  if (radio1.value.agent != "") {
    drop13.value = [
      {
        name: "是否代理：",
        value: [
          {
            name: item.name,
          },
        ],
      },
    ];
    prerequisite.value = [
      ...drop6.value,
      ...drop9.value,
      ...drop1.value,
      ...drop13.value,
    ];
  }
};

// 经营状态
let business = ref([
  {
    id: "1",
    name: "存续",
  },
  {
    id: "2",
    name: "在业",
  },
  {
    id: "3",
    name: "迁入",
  },
  {
    id: "4",
    name: "迁出",
  },
  {
    id: "5",
    name: "清算",
  },
  {
    id: "6",
    name: "停业",
  },
  {
    id: "7",
    name: "吊销",
  },
  {
    id: "8",
    name: "注销",
  },
  {
    id: "9",
    name: "其他",
  },
]);
const dropdown10 = ref();
let drop10 = ref([]);
const recognize10 = () => {
  dropdown10.value.handleClose();
  if (signalsRadio1.routerPush == "disposition") {
    signalsRadio1.getcompetitors();
  }
  if (signalsRadio1.routerPush == "search") {
    signalsRadio1.getcompanys();
  }

  if (radio1.value.operates.length > 0) {
    drop10.value = [
      {
        name: "经营状态：",
        value: radio1.value.operates,
      },
    ];
    prerequisite.value = [
      ...drop6.value,
      ...drop9.value,
      ...drop1.value,
      ...drop10.value,
    ];
  }
};
const reClick10 = () => {
  radio1.value.operates = [];
  drop10.value = [];
};

// 公司类型
let biddingBoos = ref([
  {
    id: "1",
    name: "国有企业",
  },
  {
    id: "2",
    name: "通讯运营商",
  },
  {
    id: "3",
    name: "军队",
  },
  {
    id: "4",
    name: "银行",
  },
  {
    id: "5",
    name: "证券",
  },
  {
    id: "6",
    name: "保险",
  },
  {
    id: "7",
    name: "民营企业",
  },
  {
    id: "8",
    name: "医院",
  },
  {
    id: "9",
    name: "政府及事业单位",
  },
  {
    id: "10",
    name: "学校",
  },
  {
    id: "11",
    name: "其他",
  },
]);
// 确定取消下拉框
const dropdown3 = ref();
let drop3 = ref([]);
const recognize3 = () => {
  if (signalsRadio1.routerPush == "disposition") {
    signalsRadio1.getcompetitors();
  }
  if (signalsRadio1.routerPush == "search") {
    signalsRadio1.getcompanys();
  }

  dropdown3.value.handleClose();
  if (radio1.value.Boos.length > 0) {
    drop3.value = [
      {
        name: "招标公司类型：",
        value: radio1.value.Boos,
      },
    ];
    prerequisite.value = [
      ...drop6.value,
      ...drop9.value,
      ...drop1.value,
      ...drop10.value,
      ...drop3.value,
    ];
  }
};
const reClick3 = () => {
  radio1.value.Boos = [];
  drop3.value = [];
};

const searButton = () => {
  signalsRadio1.getcompetitors();
};

watch(
  prerequisite,
  (newData, oldData) => {
    store.count = newData;
    console.log("watch", store.count);
  },
  { immediate: true, deep: true }
);

onMounted(() => {});

const gongsi = () => {
  reClick3();
  checkClock6();
  moneyClick();
  radio1.value.money = "";
  enterprisClick();
  radio1.value.enterpris = "";
  radio1.value.agent = "";
  reClick10();
};
defineExpose({
  gongsi,
  reClick10,
  reClick3,
  checkClock6,
  moneyClick,
  enterprisClick,
  radio1,
});
</script>

<style lang="scss" scoped>
.el-dropdown-menu {
  padding: 0;
}

.height {
  height: 40px;
  line-height: 40px;
  padding-left: 20px;
}

.active {
  background-color: #f43107;
  color: #f6f6f6;
}

.search_input {
  display: flex;
  flex-direction: column;
  margin-left: 175px;

  .search_s {
    position: relative;

    .search_ss {
      // display: flex;
      width: 850px;
      height: 60px;
      margin-top: 50px;
      border-radius: 50px;
      border: 1px solid #f6f6f6;
    }

    .search_buttons {
      position: absolute;
      top: 52px;
      right: 178px;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 120px;
      height: 56px;
      background-color: #f43107;
      border-radius: 50px;
      font-size: 22px;
      color: #fff;
    }
  }

  .popular_box {
    margin-top: 20px;
    color: #ffffff;
  }

  .popular {
    margin: 0 15px;
  }
}

.flexible {
  display: flex;

  .flexible_box {
    width: 300px;
    height: 300px;
    padding-left: 21px;
    overflow-x: hidden;
    overflow-y: scroll;
  }

  .flexible_bo2 {
    height: 247px;
    padding-left: 21px;
    overflow-x: hidden;
    overflow-y: scroll;
    border-bottom: 1px solid #e8e8e8;
  }

  .flexible_right {
    // width: 228px;
    flex: 1;
    border-left: 1px solid #e8e8e8;
  }
}

.dropdownButtom1 {
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding-right: 10px;
  padding-bottom: 5px;
}

.dropdownButtom {
  width: 200px;
  display: flex;
  justify-content: space-between;
  padding: 5px 10px 5px 0;
  border-top: 1px solid #e8e8e8;
}

.dropdownButtomCi {
  width: 758px;
  height: 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 15px;
  border-top: 1px solid #e8e8e8;
}

.dropdownButtoms {
  width: 560px;
  height: 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 15px;
  border-top: 1px solid #e8e8e8;
}

.infOne {
  height: 300px;
  font-size: 14px;
  overflow-x: hidden;
  overflow-y: scroll;

  .infOne_hove {
    display: flex;
    height: 40px;
    align-items: center;
    padding-left: 16px;

    &:hover {
      // background-color: #6675FF;
    }
  }
}

.inputDeep >>> .el-input__inner {
  border: 0;
}

::-webkit-scrollbar {
  display: none;
}

.search_money {
  display: flex;
  align-items: center;
  width: 150px;
  padding-left: 10px;
  margin: 0 5px;
  border-radius: 5px;
  border: 1px solid #9a9898;

  .search_mput {
    width: 50px;
    border: 0;
    outline: none;
  }
}

.search_sousou {
  display: flex;
  width: 260px;
  height: 30px;
  margin: 15px 21px 9px;
}

.birds {
  display: flex;
  justify-content: space-between;
  align-items: center;
  // flex-direction: column;
  padding: 10px 0;

  .birds_one {
    display: flex;

    .el-dropdown {
      margin-right: 25px;
    }
  }

  .birds_two {
    display: flex;

    .el-dropdown {
      margin-top: 15px;
      margin-right: 25px;
    }
  }
}

.el-checkbox__label {
  font-size: 16px;
}

.el-dropdown-link {
  color: #333;
  font-size: 14px;
}
</style>
